<script lang="ts" setup>
import { reactive } from 'vue'

interface Student {
  name: string
  age: number
  sex: string
  address: string
}
const tableData = reactive<Student[]>([
  {
    name: '王五',
    age: 20,
    sex: '男',
    address: '北京市'
  },
  {
    name: '张三',
    age: 18,
    sex: '女',
    address: '开鲁县'
  },
  {
    name: '李四',
    age: 19,
    sex: '男',
    address: '通辽市'
  }
])
const tableConfigSpan = reactive<TableConfig<Student>>({
  columns: [
    {
      type: 'default',
      label: '姓名',
      prop: 'name',
      rowSpan: idx => {
        if (idx === 0) return 2
      }
    },
    {
      type: 'default',
      label: '年龄',
      prop: 'age',
      colSpan: idx => {
        return idx === 0 ? 3 : 1
      }
    },
    {
      type: 'default',
      label: '性别',
      prop: 'sex',
      colSpan: idx => {
        if (idx === 0) return 3
        if (idx === 1) return 2
      }
    },
    { type: 'default', label: '地址', prop: 'address' }
  ]
})
</script>
<template>
  <XyTable :tableConfig="tableConfigSpan" :tableData="tableData" />
</template>
